<template>
    <div class="se-container">
        <div class="se-header">审批流程管理</div>
        <div class="se-body">
            <div
                class="filter-header"
                ref="filter"
            >
                <div class="tabs-box">
                    <el-tabs
                        v-model="tabIndex"
                        @tab-click="searchClick"
                    >
                        <el-tab-pane
                            v-for="(item, index) in tabs"
                            :key="index"
                            :label="item.label"
                            :name="item.name"
                        ></el-tab-pane>
                    </el-tabs>
                </div>
                <div class="filter-box">
                    <!-- <div class="inline w-260">
                        <el-input
                            placeholder="请输入搜索关键词"
                            prefix-icon="el-icon-search"
                            v-model="params.keyWords"
                        >
                        </el-input>
                    </div> -->
                    <el-select
                        v-model="params.cate_id"
                        @change="selectedChange"
                        :clearable="true"
                        placeholder="业务类型"
                    >
                        <el-option
                            v-for="(item, index) in cate"
                            :key="index"
                            :label="item.name"
                            :value="item.category_id"
                        >
                        </el-option>
                    </el-select>
                    <el-select
                        v-model="params.struc_id"
                        @change="selectedChange"
                        :clearable="true"
                        placeholder="招聘部门"
                    >
                        <el-option
                            v-for="(item, index) in struc"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                    <el-select
                        v-model="params.position"
                        @change="getList"
                        :clearable="true"
                        placeholder="招聘岗位"
                    >
                        <el-option
                            v-for="(item, index) in position"
                            :key="index"
                            :label="item.name"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                    <el-button
                        type="primary"
                        @click="searchClick"
                    >筛选</el-button>
                    <el-button
                        v-if="userSaveAuth"
                        class="fr"
                        @click="addClick"
                        type="primary"
                    >新增</el-button>
                </div>
            </div>
            <el-table
                class="main-table"
                id="examine-table"
                v-loading="loading"
                :data="tableData"
                :height="tableHeight"
                highlight-current-row
                style="width: 100%"
                @row-click="handleRowClick"
            >
                <el-table-column
                    show-overflow-tooltip
                    v-for="(item, index) in fieldList"
                    :key="index"
                    :prop="item.prop"
                    :width="item.width"
                    :label="item.label"
                >
                    <template
                        slot="header"
                        slot-scope="scope"
                    >
                        <div class="table-head-name">{{scope.column.label}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="160"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-if="userUpdateAuth"
                            @click="handleClick('edit', scope)"
                            type="text"
                            size="small"
                        >编辑</el-button>
                        <el-button
                            v-if="userDeleteAuth"
                            @click="handleClick('delete', scope)"
                            type="text"
                            size="small"
                        >删除</el-button>
                        <el-button
                            v-if="userInfoAuth"
                            @click="handleClick('record', scope)"
                            type="text"
                            size="small"
                        >详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="p-contianer">
                <el-pagination
                    class="p-bar"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size.sync="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                >
                </el-pagination>
            </div>
        </div>
        <create
            v-if="showHandleView"
            :handle="createHandleInfo"
            @save="getList"
            @hiden-view="showHandleView=false"
        ></create>
        <detail
            v-if="showDetail"
            :data="detailData"
            @refresh="getList"
            @hide-view="showDetail=false"
        >
        </detail>
    </div>
</template>

<script>
import Create from "./components/create";
import Detail from "./components/detail";
import {
    peInterviewListAPI,
    strucAndCateAPI,
    positionListAPI,
    recordDelAPI
} from "@/api/personnel/personnel";
import { timestampToFormatTime } from "@/utils";
import { mapGetters } from "vuex";

export default {
    /** 系统管理 的 审核管理 */
    name: "system-examine",
    components: {
        Create,
        Detail
    },
    mixins: [],
    data() {
        return {
            loading: false, // 加载动画
            tableHeight: document.documentElement.clientHeight - 330, // 表的高度
            // 右边顶部tab
            tabIndex: "10",
            tabs: [
                // {
                //     label: "全部",
                //     name: "all"
                // },
                {
                    label: "待面试",
                    name: "10"
                },
                {
                    label: "待二面",
                    name: "20"
                },
                {
                    label: "待审核",
                    name: "25"
                },
                {
                    label: "待入职",
                    name: "30"
                },
                {
                    label: "已入职",
                    name: "40"
                },
                {
                    label: "未合作",
                    name: "-10"
                },
                {
                    label: "已离职",
                    name: "50"
                }
            ],
            struc: [],
            cate: [],
            position: [],
            // 列表
            params: {
                keyWords: "",
                struc_id: "",
                cate_id: "",
                position: "",
                status: ""
            },
            tableData: [],
            fieldList: [
                {
                    prop: "position",
                    label: "招聘岗位",
                    width: 150
                },
                {
                    prop: "structure",
                    label: "招聘部门",
                    width: 150
                },
                {
                    prop: "name",
                    label: "面试人姓名",
                    width: 100
                },
                {
                    prop: "mobile",
                    label: "面试人电话",
                    width: 150
                },
                {
                    prop: "status_text",
                    label: "状态",
                    width: 100
                },
                {
                    prop: "plan_date",
                    label: "计划面试时间",
                    width: 150
                },
                {
                    prop: "update_time",
                    label: "最后修改时间",
                    width: 150
                },
                {
                    prop: "remark",
                    label: "备注"
                },
            ],
            currentPage: 1,
            pageSize: 10,
            pageSizes: [10, 20, 30, 40],
            total: 0,
            /** 展示操作框 */
            showHandleView: false,
            // 创建的相关信息
            createHandleInfo: { action: "save", id: "", position: [] },
            // 详情展示
            showDetail: false,
            detailData: {}
        };
    },
    computed: {
        ...mapGetters(["hr"]),
        // 创建权限
        userSaveAuth() {
            return this.hr&&this.hr.interview && this.hr.interview.addrecord
        },
        // 编辑权限
        userUpdateAuth() {
            return this.hr&&this.hr.interview && this.hr.interview.editrecord
        },
        // 删除权限
        userDeleteAuth() {
            return this.hr&&this.hr.interview && this.hr.interview.recorddel
        },
        // 一面记录权限
        userFirstAuth() {
            return this.hr&&this.hr.interview && this.hr.interview.firstinterview
        },
        // 二面记录权限
        userSecondAuth() {
            return this.hr&&this.hr.interview && this.hr.interview.secondinterview
        },
        // 审核权限
        userCheckAuth() {
            return this.hr&&this.hr.interview && this.hr.interview.mastercheck
        },
        // 入职权限
        userDealinAuth() {
            return this.hr&&this.hr.interview && this.hr.interview.dealin
        },
        // 离职权限
        userLeaveAuth() {
            return this.hr&&this.hr.interview && this.hr.interview.dealleave
        },
        // 面试详情
        userInfoAuth() {
            return this.hr&&this.hr.interview && this.hr.interview.recordinfo
        },
    },
    mounted() {
        var self = this;
        /** 控制table的高度 */
        window.onresize = function() {
            self.tableHeight = document.documentElement.clientHeight - 330;
        };
        this.getStrucAndCate();
        this.getPositionList();
        this.getList();
    },
    methods: {
        /** 获取业务类型 */
        getStrucAndCate() {
            let params = {};
            strucAndCateAPI(params)
                .then(res => {
                    if (res.data) {
                        this.cate = res.data.cate;
                        this.struc = res.data.struc;
                    }
                })
                .catch(() => {});
        },
        /** 获取岗位列表 */
        selectedChange () {
            this.params.position = ""
            this.getPositionList()
            this.getList()
        },
        /** 获取岗位列表 */
        getPositionList() {
            let params = {
                page: 1,
                limit: 10000,
                name: "",
                cate_id: this.params.cate_id,
                struc_id: this.params.struc_id
            };
            positionListAPI(params)
                .then(res => {
                    if (res.data && res.data.list) {
                        let arr = [];
                        let data = res.data.list;
                        for (let i = 0; i < data.length; i++) {
                            let item = {};
                            item.name = data[i].name;
                            item.value = data[i].id;
                            arr.push(item);
                        }
                        this.position = arr;
                    }
                })
                .catch(() => {});
        },
        /** 获取列表数据 */
        getList() {
            this.loading = true;
            let params = this.params;
            params.status = this.tabIndex;
            params.page = this.currentPage;
            params.limit = this.pageSize;
            peInterviewListAPI(this.params)
                .then(res => {
                    this.tableData = res.data.list;
                    this.total = res.data.dataCount;
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },

        /** 筛选 */
        searchClick() {
            this.params.page = 1;
            this.getList();
        },
        /** 添加审批流 */
        addClick() {
            this.createHandleInfo = {
                action: "save",
                position: this.position,
                id: ""
            };
            this.showHandleView = true;
        },
        /** 列表操作 */
        // 当某一行被点击时会触发该事件
        handleRowClick(row, column, event) {
            if (column.property&&this.userInfoAuth) {
                this.detailData = row;
                this.showDetail = true;
            }
        },
        // 更改每页展示数量
        handleSizeChange(val) {
            this.pageSize = val;
            this.getList();
        },
        // 更改当前页数
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getList();
        },
        // 操作
        handleClick(type, scope) {
            if (type === "edit") {
                this.createHandleInfo.action = "update";
                this.createHandleInfo.id = scope.row.id;
                this.createHandleInfo.data = scope.row;
                this.createHandleInfo.position = this.position;
                this.showHandleView = true;
            } else if (type === "delete") {
                // 删除记录
                this.$confirm("您确定要删除该条记录?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        recordDelAPI({
                            record_id: scope.row["id"]
                        })
                            .then(res => {
                                this.tableData.splice(scope.$index, 1);
                                this.getList();
                                this.$message({
                                    type: "success",
                                    message: res.data
                                });
                            })
                            .catch(() => {});
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            } else if (type === "record") {
                this.detailData = scope.row;
                this.showDetail = true
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.se-header {
    height: 60px;
    position: relative;
    z-index: 100;
    padding: 0 20px;
    font-size: 18px;
    line-height: 60px;
}

.se-body {
    background-color: white;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
}

.se-table-header {
    height: 50px;
    background-color: white;
    position: relative;
    .se-table-header-button {
        float: right;
        margin-right: 20px;
        margin-top: 10px;
    }
}

.p-contianer {
    position: relative;
    background-color: white;
    height: 44px;
    .p-bar {
        float: right;
        margin: 5px 100px 0 0;
        font-size: 14px !important;
    }
}

@import "@/styles/table.scss";
</style>
